<template>
	<view class="itemsVies">
		<view style="width: 100%;height: 14rpx;"></view>
		<view class="itemTops">
			<view class="leftImg">
				<image :src="itemObj.imageUrl||'/pagesA/static/ic.png'" mode="aspectFit" class="imgaes" v-if="itemObj.imageType == 'image'"></image>
				<video :src="itemObj.imageUrl" class="imgaes" v-else></video>
				<!-- <image src="" mode="aspectFit" class="imgaes"></image> -->
			</view>
			<view class="rigths">
				<view class="topTitle">
					{{itemObj.houseName}}
				</view>
				<view class="contes">
					<view class="leftTes">
						类型：
					</view>
					<view class="btons btons_1"
						:class="{'btons_3':itemObj.orderType == 1,'btons_2':itemObj.orderType == 2}">
						{{itemObj.orderTypeName}}
					</view>
				</view>

				<view class="moches">
					<view class="lets">
						金额：
					</view>
					<view class="rigthsc">
						¥{{itemObj.orderAmount}}元
					</view>
				</view>
				<!-- background-color: #fafafa; -->
				<view class="moches" v-if="itemObj.orderType == 1">
					<view class="lets">
						租金：
					</view>
					<view class="rigthsc" style="color: #666666;">
						¥{{itemObj.rentAmount}}元
					</view>
					<view class="lets" style="width:100rpx;margin-left: 12rpx;">
						物业费：
					</view>
					<view class="rigthsc" style="color: #666666;">
						¥{{itemObj.manageAmount}}元
					</view>
				</view>
				<view class="beix" v-if="itemObj.payedTime">
					时间：{{itemObj.payedTime}}
				</view>
				<view class="beix" v-if="itemObj.remark">
					备注：{{itemObj.remark}}
				</view>
				<!-- 0-待支付，1-支付中，2-已取消，3-已完成，4-支付失败 -->
				<view class="icons">
					<!-- <image src="/pagesA/static/hoom/wanc.svg" mode="aspectFit" class="imgs" v-if="itemObj.status == 0"></image> -->
					<!-- <image src="/pagesA/static/hoom/wanc.svg" mode="aspectFit" class="imgs" v-if="itemObj.status == 1"></image> -->
					<image src="/pagesA/static/hoom/4.png" mode="aspectFit" class="imgs" v-if="itemObj.status == 2">
					</image>
					<image src="/pagesA/static/hoom/wanc.svg" mode="aspectFit" class="imgs" v-if="itemObj.status == 3">
					</image>
					<!-- <image src="/pagesA/static/hoom/wanc.svg" mode="aspectFit" class="imgs" v-if="itemObj.status == 4"></image> -->
				</view>
			</view>
		</view>
		<view class="botms" v-if="itemObj.status == 0 || itemObj.orderType == 4">
			<view class="zhifs" v-if="itemObj.status == 0" @click="handleGoPay(itemObj.id)">
				去支付
			</view>
			<view class="dingd" v-if="itemObj.orderType == 4" @click="handleRepairs(itemObj.maintenanceId)">
				查看维修单
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		createPreOrder
	} from '../js/api.js'
	const emit = defineEmits(['reloadPage'])
	const props = defineProps({
		itemObj: {
			type: Object,
			default: () => {
				return {}
			}
		}
	})
	const handleRepairs = (id) => {
		uni.navigateTo({
			url: '/pagesA/reportFaults/reportFaults?id=' + id
		})
	}
	//支付中状态
	const isPaying = ref(false)
	const handleGoPay = async (id) => {
		if (isPaying.value) return false
		isPaying.value = true

		const orderId = id
		try {
			// 显示加载中
			uni.showLoading({
				title: '准备支付...'
			});
			const loginRes = await uni.login({
				provider: 'weixin'
			});
			let code = loginRes.code
			if (code) {
				let res = await createPreOrder({
					id: orderId,
					code
				})
				console.log('code', res.data.data)
				// 2. 检查返回结果
				if (res.data.code != 0) {
					uni.showToast({
						title: res.data.message || '支付失败',
						icon: 'none'
					});
					isPaying.value = false
					uni.hideLoading();
					return;
				}
				const payParams = res.data.data;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payParams.timeStamp,
					nonceStr: payParams.nonceStr,
					package: payParams.packageVal,
					signType: payParams.signType,
					paySign: payParams.paySign,
					success: (res) => {
						uni.showToast({
							title: '支付成功',
							icon: 'success'
						});
						// 处理支付成功逻辑，如跳转到订单详情页
						uni.navigateTo({
							url: '/pagesA/paymentResult/paymentResult?id=' + orderId
						});
						emit('reloadPage')
					},
					fail: (err) => {
						console.error('支付失败', err);
						if (err.errMsg.includes('cancel')) {
							uni.showToast({
								title: '用户取消支付',
								icon: 'none'
							});
						} else {
							uni.showToast({
								title: '支付失败，请重试',
								icon: 'none'
							});
						}
					},
					complete: () => {
						uni.hideLoading();
						isPaying.value = false
					}
				});
			} else {
				isPaying.value = false
			}
		} catch (error) {
			uni.hideLoading();
			isPaying.value = false
			console.error('支付异常', error);
			uni.showToast({
				title: '支付异常，请稍后再试',
				icon: 'none'
			});
		}
	}
</script>

<style lang="less" scoped>
	.itemsVies {
		width: 100%;
		// height: 337rpx;
		background-color: #FFFFFF;
		margin-bottom: 16rpx;

		.itemTops {
			width: 690rpx;
			height: 256rpx;
			border-bottom: 1rpx solid #EEEEEE;
			margin: auto;
			display: flex;
			align-items: center;

			.leftImg {
				width: 230rpx;
				height: 204rpx;
				display: flex;
				align-items: center;
				overflow: auto;
				background: #e3e4e5;

				.imgaes {
					width: 230rpx;
					// height: 204rpx;
				}
			}

			.rigths {
				width: 436rpx;
				height: 224rpx;
				margin-left: 24rpx;
				position: relative;

				.topTitle {
					font-family: PingFangSC-Semibold;
					font-size: 30rpx;
					color: #000000;
					line-height: 36rpx;
					font-weight: 600;
				}

				.contes {
					width: 100%;
					height: 32rpx;
					margin-top: 19rpx;
					// border: 1rpx solid;
					display: flex;

					.leftTes {
						width: 72rpx;
						font-family: PingFangSC-Regular;
						font-size: 24rpx;
						color: #666666;
						line-height: 26rpx;
						font-weight: 400;
					}

					.btons {
						width: 92rpx;
						height: 32rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: linear-gradient(to right, #8FCF5A, #41B815);
						border-radius: 4px;
						font-family: PingFangSC-Regular;
						font-size: 20rpx;
						color: #FFFFFF;
						letter-spacing: 0;
						line-height: 32rpx;
						font-weight: 400;
					}

					.btons_1 {
						background: linear-gradient(to right, #F1B13F, #FF964F);
						// border-radius: 4px;
						width: 112rpx;
					}

					.btons_2 {
						background: linear-gradient(to right, #56AEFB, #9B8AFF);
					}

					.btons_3 {
						background: linear-gradient(to right, #E09B6A, #CD9864);
					}
				}

				.beix {
					margin-top: 11rpx;
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: #666666;
					line-height: 26rpx;
					font-weight: 400;
				}

				.moches {
					margin-top: 14rpx;
					display: flex;
					align-items: center;

					.lets {
						width: 72rpx;
						height: 26rpx;
						font-family: PingFangSC-Regular;
						font-size: 24rpx;
						color: #666666;
						line-height: 26rpx;
						font-weight: 400;
					}

					.rigthsc {
						font-family: PingFangSC-Regular;
						font-size: 24rpx;
						color: #EE7930;
						line-height: 26rpx;
						font-weight: 400;
					}
				}

				.icons {
					position: absolute;
					top: 0;
					right: 0;
					width: 104rpx;
					height: 76rpx;
					// border: 1px solid red;

					.imgs {
						width: 104rpx;
						height: 76rpx;
					}
				}
			}
		}

		.botms {
			width: 690rpx;
			height: 86rpx;
			margin: auto;
			// border: 1px solid;
			display: flex;
			flex-direction: row-reverse;
			align-items: center;

			.zhifs {
				width: 132rpx;
				height: 54rpx;
				background: #EE7930;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				color: #FFFDFC;
				text-align: center;
				line-height: 30rpx;
				font-weight: 400
			}

			.dingd {
				border: 2rpx solid rgba(238, 121, 48, 1);
				border-radius: 8rpx;
				width: 180rpx;
				height: 54rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				color: #EE7930;
				text-align: center;
				line-height: 30rpx;
				font-weight: 400;
				margin: 0 16rpx;
			}
		}
	}

	.itemsVies_1 {
		height: 264rpx;

		.itemTops_1 {
			border: none;

		}
	}
</style>